﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Slick/Slick</title>
</head>

<body>
  <div id="docs" class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Slick">Slick</a></h4>
			<div class="menu-item"><a href="#"></a></div>
			<div class="menu-item"><a href="#Slick:Slick-definePseudo">Slick.definePseudo</a></div>
			<div class="menu-item"><a href="#Slick:nextSiblings">nextSiblings</a></div>
			<div class="menu-item"><a href="#Slick:previouSiblings">previouSiblings</a></div>
			<div class="menu-item"><a href="#Slick:allSiblings">allSiblings</a></div>
			<div class="menu-item"><a href="#Slick:firstChild">firstChild</a></div>
			<div class="menu-item"><a href="#Slick:lastChild">lastChild</a></div>
			<div class="menu-item"><a href="#Slick:checked">checked</a></div>
			<div class="menu-item"><a href="#Slick:enabled">enabled</a></div>
			<div class="menu-item"><a href="#Slick:empty">empty</a></div>
			<div class="menu-item"><a href="#Slick:contains">contains</a></div>
			<div class="menu-item"><a href="#Slick:focus">focus</a></div>
			<div class="menu-item"><a href="#Slick:not">not</a></div>
			<div class="menu-item"><a href="#Slick:nth-child">nth.child</a></div>
			<div class="menu-item"><a href="#Slick:even">even</a></div>
			<div class="menu-item"><a href="#Slick:odd">odd</a></div>
			<div class="menu-item"><a href="#Slick:index">index</a></div>
			<div class="menu-item"><a href="#Slick:first-child">first.child</a></div>
			<div class="menu-item"><a href="#Slick:last-child">last.child</a></div>
			<div class="menu-item"><a href="#Slick:only-child">only.child</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Slick"><a href="#Slick">Slick</a></h1>

<p class="description">Slick is the selector engine used by MooTools. It supports many CSS3 selectors and more!</p>

<h3>See Also:</h3>

<ul>
<li><a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-classes">W3C Pseudo Classes</a></li>
</ul>
<h2><a href="#">Reverse Combinators</a></h2>

<p class="description">Reverse Combinators redirect the flow of selectors and combinators. Slick implements these by prepending <code>!</code> to a selector or combinator.</p>

<h3>Examples:</h3>

<pre class="javascript">document.<span class="me1">getElement</span><span class="br0">(</span><span class="st0">'p ! div'</span><span class="br0">)</span>    <span class="co1">// A &lt;div&gt; that is an ancestor of a &lt;p&gt;</span>
document.<span class="me1">getElement</span><span class="br0">(</span><span class="st0">'p !&gt; div'</span><span class="br0">)</span>   <span class="co1">// A &lt;div&gt; that is a direct parent of a &lt;p&gt;</span>
document.<span class="me1">getElement</span><span class="br0">(</span><span class="st0">'.foo !+ p'</span><span class="br0">)</span>  <span class="co1">// Gets the previous adjacent &lt;p&gt; sibling</span>
</pre>

<h3>Notes:</h3>

<p>Reverse Combinators are used internally by MooTools for many of our traversal methods. They offer an extremely concise and powerful alternative to traversal methods like <code>getParent()</code>.</p>

<h2 id="Slick:Slick-definePseudo"><a href="#Slick:Slick-definePseudo">Function: Slick.definePseudo</a></h2>

<p class="description">definePseudo allows you to create your own custom pseudo selectors.</p>

<h3>Examples:</h3>

<pre class="javascript">Slick.<span class="me1">definePseudo</span><span class="br0">(</span><span class="st0">'display'</span>, <span class="kw2">function</span><span class="br0">(</span>value<span class="br0">)</span><span class="br0">{</span>
    <span class="kw1">return</span> Element.<span class="me1">getStyle</span><span class="br0">(</span><span class="kw1">this</span>, <span class="st0">'display'</span><span class="br0">)</span> == value;
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
&lt;div style=<span class="st0">"display: none"</span>&gt;foo&lt;/div&gt;
&lt;div style=<span class="st0">"display: block"</span>&gt;bar&lt;/div&gt;
&nbsp;
$$<span class="br0">(</span><span class="st0">':display(block)'</span><span class="br0">)</span>;      <span class="co1">// Will return the block element</span>
&nbsp;
Slick.<span class="me1">definePseudo</span><span class="br0">(</span><span class="st0">'my-custom-pseudo'</span>, <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
    <span class="co1">// 'this' is the node to check</span>
    <span class="kw1">return</span> Element.<span class="me1">retrieve</span><span class="br0">(</span><span class="kw1">this</span>, <span class="st0">'something-custom'</span><span class="br0">)</span>.<span class="me1">isAwesome</span>;
<span class="br0">}</span><span class="br0">)</span>;
&nbsp;
$$<span class="br0">(</span><span class="st0">':my-custom-pseudo'</span><span class="br0">)</span>     <span class="co1">// Will return the first &lt;p&gt; tag that is awesome</span>
</pre>

<h2 id="Slick:nextSiblings"><a href="#Slick:nextSiblings">Selector: Next Siblings ('~')</a></h2>

<p class="description">Gets the next siblings.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'p.foo ~'</span><span class="br0">)</span>        <span class="co1">// Gets all next siblings of &lt;p class="foo"&gt;</span>
$$<span class="br0">(</span><span class="st0">'p.foo ~ blockquote'</span><span class="br0">)</span> <span class="co1">// Gets every &lt;blockquote&gt; with a &lt;p class="foo"&gt; sibling somewhere *before* it</span>
</pre>

<h2 id="Slick:previouSiblings"><a href="#Slick:previouSiblings">Selector: Previous Siblings ('!~')</a></h2>

<p class="description">Gets the previous siblings.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'p.foo !~'</span><span class="br0">)</span>            <span class="co1">// Gets all previous siblings of &lt;p class="foo"&gt;</span>
$$<span class="br0">(</span><span class="st0">'p.foo !~ blockquote'</span><span class="br0">)</span> <span class="co1">// Gets every &lt;blockquote&gt; with a &lt;p class="foo"&gt; sibling somewhere *after* it</span>
</pre>

<h2 id="Slick:allSiblings"><a href="#Slick:allSiblings">Selector: All Siblings ('~~')</a></h2>

<p class="description">Gets all siblings.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'p.foo ~~'</span><span class="br0">)</span>            <span class="co1">// Gets all previous and next siblings of &lt;p class="foo"&gt;</span>
$$<span class="br0">(</span><span class="st0">'p.foo ~~ blockquote'</span><span class="br0">)</span> <span class="co1">// Gets every &lt;blockquote&gt; with a &lt;p class="foo"&gt; sibling before OR after it</span>
</pre>

<h2 id="Slick:firstChild"><a href="#Slick:firstChild">Selector: First Child ('^')</a></h2>

<p class="description">Gets the first child of an element.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'p.foo ^'</span><span class="br0">)</span>       <span class="co1">// Gets the first child of &lt;p class="foo"&gt;</span>
$$<span class="br0">(</span><span class="st0">'p.foo ^ strong'</span><span class="br0">)</span>    <span class="co1">// Gets every &lt;strong&gt; that is the first element child of a &lt;p class="foo"&gt;</span>
</pre>

<h2 id="Slick:lastChild"><a href="#Slick:lastChild">Selector: Last Child ('!^')</a></h2>

<p class="description">Gets the last child of an element.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'p.foo !^'</span><span class="br0">)</span>      <span class="co1">// Gets the last child of &lt;p class="foo"&gt;</span>
$$<span class="br0">(</span><span class="st0">'p.foo !^ strong'</span><span class="br0">)</span>   <span class="co1">// Gets every &lt;strong&gt; that is the last element child of a &lt;p class="foo"&gt;</span>
</pre>

<h2 id="Slick:checked"><a href="#Slick:checked">Selector: checked</a></h2>

<p class="description">Matches all Elements that are checked.</p>

<h3>Examples:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">':checked'</span><span class="br0">)</span>
&nbsp;
$<span class="br0">(</span><span class="st0">'myForm'</span><span class="br0">)</span>.<span class="me1">getElements</span><span class="br0">(</span><span class="st0">'input:checked'</span><span class="br0">)</span>;
</pre>

<h2 id="Slick:enabled"><a href="#Slick:enabled">Selector: enabled</a></h2>

<p class="description">Matches all Elements that are enabled.</p>

<h3>Examples:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">':enabled'</span><span class="br0">)</span>
&nbsp;
$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">getElements</span><span class="br0">(</span><span class="st0">':enabled'</span><span class="br0">)</span>;
</pre>

<h2 id="Slick:empty"><a href="#Slick:empty">Selector: empty</a></h2>

<p class="description">Matches all elements which are empty.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">':empty'</span><span class="br0">)</span>;
</pre>

<h2 id="Slick:contains"><a href="#Slick:contains">Selector: contains</a></h2>

<p class="description">Matches all the Elements which contains the text.</p>

<h3>Variables:</h3>

<ul>
<li>text - (string) The text that the Element should contain.</li>
</ul>
<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'p:contains("find me")'</span><span class="br0">)</span>;
</pre>

<h2 id="Slick:focus"><a href="#Slick:focus">Selector: focus</a></h2>

<p class="description">Gets the element in focus.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">':focus'</span><span class="br0">)</span>;       <span class="co1">// Gets the element in focus</span>
</pre>

<h2 id="Slick:not"><a href="#Slick:not">Selector: not</a></h2>

<p class="description">Matches all elements that do not match the selector.</p>

<p><small>Note: The Slick implementation of the <code>:not</code> pseudoClass is a superset of the standard. i.e. it is more advanced than the specification.</small></p>

<h3>Examples:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">':not(div.foo)'</span><span class="br0">)</span>; <span class="co1">// all elements except divs with class 'foo'</span>
&nbsp;
$$<span class="br0">(</span><span class="st0">'input:not([type="submit"])'</span><span class="br0">)</span>; <span class="co1">// all inputs except submit buttons</span>
&nbsp;
myElement.<span class="me1">getElements</span><span class="br0">(</span><span class="st0">':not(a)'</span><span class="br0">)</span>;
&nbsp;
$$<span class="br0">(</span><span class="st0">':not(ul li)'</span><span class="br0">)</span>;
</pre>

<h2 id="Slick:nth-child"><a href="#Slick:nth-child">Selector: nth-child</a></h2>

<p class="description">Matches every nth child.</p>

<h3>Usage:</h3>

<p>Nth Expression:</p>

<pre class="javascript"><span class="st0">':nth-child(nExpression)'</span>
</pre>

<h3>Variables:</h3>

<ul>
<li>nExpression - (string) A nth expression for the "every" nth-child.</li>
</ul>
<h3>Examples:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'#myDiv:nth-child(2n)'</span><span class="br0">)</span>; <span class="co1">//Returns every even child.</span>
&nbsp;
$$<span class="br0">(</span><span class="st0">'#myDiv:nth-child(n)'</span><span class="br0">)</span>; <span class="co1">//Returns all children.</span>
&nbsp;
$$<span class="br0">(</span><span class="st0">'#myDiv:nth-child(2n+1)'</span><span class="br0">)</span> <span class="co1">//Returns every odd child.</span>
&nbsp;
$$<span class="br0">(</span><span class="st0">'#myDiv:nth-child(4n+3)'</span><span class="br0">)</span> <span class="co1">//Returns Elements 3, 7, 11, 15, etc.</span>
</pre>

<p>Every Odd Child:</p>

<pre class="javascript"><span class="st0">':nth-child(odd)'</span>
</pre>

<p>Every Even Child:</p>

<pre class="javascript"><span class="st0">':nth-child(even)'</span>
</pre>

<p>Only Child:</p>

<pre class="javascript"><span class="st0">':nth-child(only)'</span>
</pre>

<p>First Child:</p>

<pre class="javascript"><span class="st0">'nth-child(first)'</span>
</pre>

<p>Last Child:</p>

<pre class="javascript"><span class="st0">'nth-child(last)'</span>
</pre>

<h3>Note:</h3>

<p>This selector respects the w3c specifications, so it has 1 as its first child, not 0. Therefore nth-child(odd) will actually select the even children, if you think in zero-based indexes.</p>

<h2 id="Slick:even"><a href="#Slick:even">Selector: even</a></h2>

<p class="description">Matches every even child.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'td:even'</span><span class="br0">)</span>;
</pre>

<h3>Note:</h3>

<p>This selector is not part of the w3c specification, therefore its index starts at 0. This selector is highly recommended over nth-child(even), as this will return the real even children.</p>

<h2 id="Slick:odd"><a href="#Slick:odd">Selector: odd</a></h2>

<p class="description">Matches every odd child.</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'td:odd'</span><span class="br0">)</span>;
</pre>

<h3>Note:</h3>

<p>This selector is not part of the w3c specification, therefore its index starts at 0. This selector is highly recommended over nth-child(odd), as this will return the real odd children.</p>

<h2 id="Slick:index"><a href="#Slick:index">Selector: index</a></h2>

<p class="description">Matches the node at the specified index</p>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'p:index(2)'</span><span class="br0">)</span>;       <span class="co1">// Gets the third &lt;p&gt; tag.</span>
</pre>

<h3>Note:</h3>

<p>This is zero-indexed.</p>

<h2 id="Slick:first-child"><a href="#Slick:first-child">Selector: first-child</a></h2>

<p class="description">Matches the first child.</p>

<h3>Usage:</h3>

<pre class="javascript"><span class="st0">':first-child'</span>
</pre>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'td:first-child'</span><span class="br0">)</span>;
</pre>

<h2 id="Slick:last-child"><a href="#Slick:last-child">Selector: last-child</a></h2>

<pre class="javascript">Matches the last child.
</pre>

<h3>Usage:</h3>

<pre class="javascript"><span class="st0">':last-child'</span>
</pre>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'td:last-child'</span><span class="br0">)</span>;
</pre>

<h2 id="Slick:only-child"><a href="#Slick:only-child">Selector: only-child</a></h2>

<p class="description">Matches an only child of its parent Element.</p>

<h3>Usage:</h3>

<pre class="javascript"><span class="st0">':only-child'</span>
</pre>

<h3>Example:</h3>

<pre class="javascript">$$<span class="br0">(</span><span class="st0">'td:only-child'</span><span class="br0">)</span>;
</pre>

    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
